<template>
    <div ref="page" @click="tobar()">
        <div :class="[{ active: isbar }, 'read-bar']">
            <div class="topnav" >
                <a href="javascript:history.go(-1)">
                    <span class="iconfont icon-zuo"></span>
                </a>                
            </div>            
        </div>
        <div :class="[{ active: isbar }, 'read-footer']">
            <div class="botnav">
                <div class="btn" @click.stop="tocat()"> 
                    <span class="iconfont icon-mulu"></span>
                    <h4>目录</h4>
                </div>
                <div class="btn"> 
                    <span class="iconfont icon-jindu"></span>
                    <h4>进度</h4>
                </div>
                <div class="btn"> 
                    <span class="iconfont icon-ziti"></span>
                    <h4>设置</h4>
                </div>
                <div class="btn" @click.stop="tomoon()" v-if="!ismoon"> 
                    <span class="iconfont icon-yejian"></span>
                    <h4>夜间</h4>
                </div>
                <div class="btn" @click.stop="tomoon()" v-if="ismoon"> 
                    <span class="iconfont icon-rijian"></span>
                    <h4>日间</h4>
                </div>
            </div>
        </div>
        <i class="closecat" @click.stop="tocat()" v-if="iscat"></i>
        <div :class="[{ active: iscat }, 'catalogue']">
            <div class="title">目录</div>
            <div class="lis">
                <ul>
                    <li v-for="(item,index) in chapers" :key="index" @click="gochaper(index+1)">{{item.title}}</li>
                </ul>
            </div>
        </div>
        <div :class="[{ moon: ismoon }, 'readpage']">
            <van-loading size="24px" vertical v-if="isload" color="rgb(237,66,75)">正在加载上一章...</van-loading>
            <div class="main" v-for="(item,index) in content" :key="index">
                <h3 class="chaper">{{item.title}}</h3>
                <div class="content">
                    <!-- <a :href="msg[0].link">前往正版查看小说内容</a> -->
                    <div v-html="item.cpContent"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'vant/lib/index.css'
import {getBookread,getchapers} from '../api/book.js'
export default {
    data() {
        return {
            msg:[{title:'',link:''}],
            content:[],
            offset:1,
            preoffset:1,
            isbar:false,
            ismoon:false,
            iscat:false,
            chapers:[],
            isload:false,
            ok:0
        }
    },
    methods: {
        tobar(){
            this.isbar = !this.isbar
        },
        tomoon(){
            this.ismoon = !this.ismoon
        },
        tocat(){
            this.iscat = !this.iscat
        }, 
        gochaper(index){
            // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            document.documentElement.scrollTop = 10;
            window.pageYOffset = 10;
            document.body.scrollTop = 10;
            window.setTimeout(() => {
                document.documentElement.scrollTop = 0;
            window.pageYOffset = 0;
            document.body.scrollTop = 0;
            }, 1000);
            this.content = [];
            this.getBookreadFun(index);
            this.offset = index;
            this.iscat = false;
            this.preoffset = index;
        },
        getbook(){            
            if(window.localStorage.getItem('historylist')){
                let list = window.localStorage.getItem('historylist').split(',');
                list.push(this.$route.query.id);
                list = Array.from(new Set(list));
                window.localStorage.setItem('historylist',list);
            }else{
                window.localStorage.setItem('historylist',this.$route.query.id);
            }
        },
        getchapersFun(){
            getchapers().then(data=>{
                // console.log(data);
                this.chapers = data.chapters;
                // console.log(this.chapers);
            })
        },
        // getBookChapterFun(){            
        //     getBookChapter(this.$route.query.id).then(data=>{
        //         console.log(data);
        //         this.msg = data.mixToc.chapters;
        //         console.log(this.msg)
        //     })
        //     this.$forceUpdate();
        // },
        getBookreadFun(offset){
            getBookread(offset).then(data=>{
                // console.log(data);
                // this.content = [];
                this.content.push(data);

                // document.documentElement.scrollTop = 0;
            })
        },
        getBookreadprevFUN(offset){
            this.isload = true;
            window.setTimeout(() => {
                getBookread(offset).then(data=>{
                // console.log(data);
                this.content.unshift(data);
            })
            this.isload = false;
            }, 2000);
            
        },
        //滚动条监听
        handleScroll(){            
                // console.log(111);
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrollTop);
            // console.log(this.$refs.lists.getElementsByTagName("li"));
            let page = this.$refs.page.getElementsByClassName("readpage");
            // console.log(page);
            let height = page[0].clientHeight;
            
            // console.log(height);
            // let liHeight = page[num-2].offsetTop;
            // console.log(liHeight);
            console.log("滚动距离"+scrollTop+"高度"+height*0.77);
            if(scrollTop >= height*0.77 && this.ok == 0){
                this.ok = 1;
                console.log('向下滚')
                this.offset = this.offset+1;
                // console.log(this.offset);
                this.getBookreadFun(this.offset);
                window.setTimeout(() => {
                    this.ok = 0;
                }, 2000);
                
            }
            if(scrollTop === 0 && this.preoffset != 1){
                console.log(scrollTop);
                console.log('向上滚');
                
                this.preoffset -= 1
                console.log(this.preoffset)
                this.getBookreadprevFUN(this.preoffset);

            }            
        }
    },
    created(){
        this.getbook();
            // this.getBookChapterFun(); 
            this.getchapersFun();  
            this.getBookreadFun(1);
    },
    mounted() {
        this.$nextTick(()=>{
            //  this.getBookChapterFun();   
            window.addEventListener("scroll",this.handleScroll);
        })
    },
    beforeDestroy() {
        window.removeEventListener("scroll",this.handleScroll);
    }
   
}
</script>
<style lang="less">
.read-bar{
    z-index: 100;
    position: fixed;
    height: 2.75rem;
    background-color: rgba(0,0,0,.9);
    width: 100%;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity .15s,transform .15s,visibility .15s;
    .topnav{
        position: relative;
        span{
            position: absolute;
            color: #fff;
            font-size: 1.5rem;
            line-height: 2.75rem;
        }
    }
}
.read-footer{
    z-index: 100;
    position: fixed;
    bottom: 0;
    height: 2.75rem;
    background-color: rgba(0,0,0,.9);
    width: 100%;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity .15s,transform .15s,visibility .15s;
    .botnav{
        position: relative;
        display: flex;
        .btn{
            flex: 1;
            color: rgb(199,198,198);
            text-align: center;
            font-weight: 400;
            line-height: 1.75rem;
            span{
                font-size: 1rem;
            }
            h4{
                font-size: 10px;
                font-weight: 300;
                line-height: 1;
            }
        }
    }
}
.read-bar.active{
    visibility: visible;
    transform: translateY(0%);
}
.read-footer.active{
    visibility: visible;
    transform: translateY(0%);
}
    .readpage{
        .chaper{
                font-size: 1.5em;
    font-weight: 400;
    line-height: 1.2;
    margin: 1em 0;
    margin-top: 0;
        }
        width: 100%;
        // height: 100%;
        // position: fixed;
        background-image: url('https://qidian.gtimg.com/qdm/img/skin-default-m.35905.jpg');
        .main{
            position: relative;
            // height: 100%;
            width: 100%;
            padding: 1.5rem;
            box-sizing: border-box;
            .content{
                p{
                    text-indent: 2em;
                }
                a{
                    position: absolute;
                    top: 30%;
                    left: 26%;
                    color: -webkit-link;
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
    }
    .readpage.moon{
        color: rgb(141,141,141);
        background-image: none;
        background-color: rgb(26,26,26);
    }
    .catalogue{
        position: fixed;
        background-color: #fff;
        height: 100%;
        width: 90%;
        right: 0;
        z-index: 500;
        visibility: hidden;
        transform: translateX(100%);
        transition: opacity .15s,transform .15s,visibility .15s;
        .lis{
            height: 100%;
            position: relative;
            // overflow-y: scroll;
            ul{
                height: 100%;
                overflow: auto;
            // position: absolute;
            // top: 2.8125rem;
            // right: 0;
            // bottom: 0;
            // left: 0;
            }
        }
        li{
            padding-right: 2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            font: 14px/20px a;
            display: block;
            overflow: hidden;
            padding: 12px 1rem;      
            border-bottom: 1px solid #f0f1f2;      
        }
        
    }
    .catalogue.active{
        visibility: visible;
    transform: translateX(0%);
    .title{
        height: 2.75rem;
        font-size: .875rem;
        line-height: 2.75rem;
        text-align: center;
        color: #ed424b;
        border-bottom: 1px solid #ed424b;
        // border-bottom-color: #ed424b;
    }
    }
    .closecat{
        width: 100%;
        height: 100%;
        position: fixed;     
        z-index: 400;  
        opacity: .6;
        background-color: #000;
    }
</style>